<template>
   <div class="container">
        <div class="aside" :style="{width:isOpen?'auto':'200px'}">
           <div class="logo"></div>
          <MenuList :isOpen="isOpen"></MenuList>
        </div>
        <div class="section">

          <div class="header">
            <!-- el-icon-s-fold 要关闭 -->
            <!-- el-icon-s-unfold  要打开-->
             <i :class="{'el-icon-s-fold':!isOpen, 'el-icon-s-unfold':isOpen}" @click="toggleClick"></i>
          
              
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <span>{{ userInfo.phone }}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="/logout">退出登录</el-dropdown-item>
              <el-dropdown-item command="/user/update">修改用户信息</el-dropdown-item>
              <el-dropdown-item command="/user/editpwd">修改密码</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
            </div>
            <div class="main-content">
              <el-breadcrumb class="bread-crumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path || '/' }">{{ item.title }}</el-breadcrumb-item>
              </el-breadcrumb>

              <router-view></router-view>
            </div>
        </div>
   </div>
</template>

<script>
import MenuList from '@/components/MenuList.vue';
import {mapState} from 'vuex'
  export default {
    data(){
      return {
        isOpen:false,
        breadcrumb:[]
      }
    },
    computed:{
      ...mapState(['userInfo'])
    },
    watch:{
      '$route':{
        immediate:true,
        handler(newObj){
          console.log(newObj.matched);
          this.breadcrumb =  newObj.matched.map((item)=>{
             return {
                title:item.meta.title,
                path:item.path
             }
          })

          
        }
      }
    },
    methods: {  
      handleCommand(path){
        if(path=='/logout') {
          // 清除所有缓存， 跳转到登录
          localStorage.clear();
          this.$router.replace('/login');
          return;
        }
          // 跳转到相应页面
          this.$router.push({
            path:path
          }) 
          
      },
      toggleClick(){
        this.isOpen = !this.isOpen;
      } 
    },
    components:{
      MenuList
    }
  }
</script>

<style lang="scss" >
.bread-crumb {
  margin-bottom: 15px;
}
.logo {
  height: 60px;
  margin-left:16px;
  background: url('../assets/images/logo-img.jpg') left center no-repeat;
  background-size: 130px 40px;
  border-right: 1px solid #e6e6e6;
}
 .container {
  background: #fff;
  height: 100vh;
  width: 100vw;
  display: flex;
  text-align: left;
  .aside {
    width:200px;
    flex-shrink: 0;
    height: 100vh;
    background: #fff;
   > ul.el-menu {
      height:calc(100vh - 60px);
    }
    img {
      width: 80%;
    }
  }
  .section {
    flex-grow: 1;
    .header {
      height: 50px;
      background: #fff;
      border-bottom: 1px solid #e6e6e6;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      i { color: #666; font-size: 24px; cursor: pointer; }
    }
    .main-content {
      height: calc(100vh - 50px);
      overflow: auto;
      padding: 20px;
      position: relative;

     /* 整体滚动条部分 */
      &::-webkit-scrollbar {
        width: 5px;
      }
        /* 滑块的样式 */
      &::-webkit-scrollbar-thumb {
            background: rgba(220, 144, 30, 0.4);
            border-radius: 10px;
        }
      /* 外层轨道 */
      &::-webkit-scrollbar-track {
            background: #ccc;
        }

    

    }
  }

 }



</style>
